<template>
  <!-- 主页面左侧组件列表项 -->
  <div class="vy-cmp-index">
    <div class="vy-cmp-container" ref="cmps">
      <div class="vy-cmp-wrapper">
        <div class="vy-cmp-panel">
          <template v-for="(item, index) in cmps">
            <!-- openState 1-开启 否则：关闭 -->
            <div
              class="vy-cmp-item"
              :class="{ actived: item.isActived }"
              :key="index"
              @click="vy_actived_click(item)"
            >
              <template v-if="item.openState != 1">
                <!-- 蒙层锁 -->
                <div class="vy-cmp-item-lock">
                  <a-icon type="lock" :style="menuLockStyle" />
                </div>
              </template>
              <!-- 组件菜单展示内容 -->
              <div
                class="vy-cmp-item-icon"
                v-if="item.icontfont && item.name != '内容'"
              >
                <template v-if="!item.isActived">
                  <svg
                    class="icon"
                    aria-hidden="true"
                    font-size="50"
                    color="#676767"
                  >
                    <use v-bind:xlink:href="item.icontfont"></use>
                  </svg>
                </template>
                <template v-else>
                  <svg
                    class="icon"
                    aria-hidden="true"
                    font-size="50"
                    color="#FFFFFF"
                  >
                    <use v-bind:xlink:href="item.icontfont"></use>
                  </svg>
                </template>
              </div>
              <div style="text-align:center;" v-if="item.name == '内容'">
                <img
                  src="https://image.xuexiwangzhe.com/Fn2vtmQogRc8E2V4UdvOyskjuIVW"
                  style="width:50px;"
                />
              </div>
              <div class="vy-cmp-item-desc">{{ item.name }}</div>
            </div>
          </template>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "vy-cmp-index",
  data() {
    return {
      canToggleTag: false, // 栏目标题是否可点击切换隐藏，false：不可切换；true：允许切换
      cmps: [],
      // 被锁菜单样式
      menuLockStyle: {
        position: "absolute",
        top: "50%",
        left: "50%",
        transform: "translate(-50%, -50%)",
        fontSize: "40px",
        color: "#fff",
      },
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.queryList();
    });
  },
  methods: {
    // 查询主题形式类型列表
    queryList() {
      this.$axios.get("/moduleType/list").then((res) => {
        let _cmps = [];
        if (res && res.moduleTypes && res.moduleTypes.length) {
          res.moduleTypes.forEach((item) => {
            let obj = {
              // 组件视图标识, 根绝类型匹配对应的标识【⚠️注意事项：不可轻易修改，该字段会匹配rightedit目录下的组件名称】
              flag: window.getCmpType(item.type).cmpflag || "",
              isActived: false, // 按钮激活状态
            };
            Object.assign(obj, item);
            _cmps.push(obj);
          });
        }
        // 排序
        _cmps.sort((a, b) => {
          return a.orderNum - b.orderNum;
        });
        this.cmps = _cmps;
      });
    },
    // 组件名称点击事件
    vy_actived_click(item) {
      // 关闭，即加锁时，给出提示信息
      if (item.openState != 1) {
        this.$message.info("该功能暂未开放.");
        return;
      }
      this.setActived(item);
    },
    // 设置当前点击组件名称的激活状态
    setActived(item) {
      this.resetActived();
      // 添加当前点击组件样式
      item.isActived = !item.isActived;
      // 根据状态激活或销毁组件
      let _flag = item.isActived ? item.flag : null;
      this.$emit("vy_click", _flag, item);
    },
    // 移除所有组件名称样式
    resetActived() {
      this.cmps.forEach((cmp) => {
        cmp.isActived = false;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.vy-cmp-index {
  width: 100%;
  height: 100%;
  overflow: hidden;
  .vy-cmp-title {
    font-weight: 600;
    font-size: 22px;
    color: rgba(0, 0, 0, 1);
    padding-bottom: 10px;
  }
  .vy-cmp-container {
    .vy-cmp-wrapper {
      // padding: 12px 0;
      .vy-cmp-subtitle {
        font-weight: 400;
        color: rgba(1, 1, 1, 1);
        font-size: 20px;
        position: relative;
        &::after {
          position: absolute;
          content: " ";
          border: 6px solid #000000;
          border-color: #000000 #fff #fff #fff;
          top: 12px;
          margin-left: 5px;
        }
        &.toggle_up {
          &::after {
            top: 6px;
            border: 6px solid #000000;
            border-color: #fff #fff #000000 #fff;
          }
        }
      }
      .vy-cmp-panel {
        // border: 1px solid #000000;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        .vy-cmp-item {
          // border: 1px solid deeppink;
          position: relative;
          width: calc((100% - (10px * 2) * 6) / 6);
          display: inline-table;
          text-align: center;
          margin: 10px;
          padding: 10px;
          border-radius: 5px;
          cursor: pointer;
          box-shadow: 0px 0px 10px 2px rgba(87, 87, 87, 0.14);
          .vy-cmp-item-lock {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            background: rgba(0, 0, 0, 1);
            box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.23);
            border-radius: 5px;
            opacity: 0.39;
          }
          .vy-cmp-item-icon {
            img {
              width: 29px;
              height: 25px;
              margin: 0 auto;
              display: block;
            }
          }
          .vy-cmp-item-desc {
            font-size: 14px;
            font-weight: 400;
            color: rgba(158, 158, 158, 1);
          }
          &.actived {
            background: rgba(51, 102, 255, 1);
            .vy-cmp-item-desc {
              color: rgba(255, 255, 255, 1);
            }
          }
        }
      }
    }
  }
}
</style>
